<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_386958_65lbxc7ixx.css"/>
		<style type="text/css">
			body{
				background: #eee;
				width: 100%;
				overflow-x: hidden;
			}
			*,html,body{
				margin: 0;
				padding: 0;
			}
			.goods-list{
				background: #fff;
				/*opacity: 0.5;*/
			}
			.run{				
				transition: all 0.5s;
			}
			.goods-list li{
				list-style-type: none;
				height: 40px;
				line-height: 40px;
				padding: 0 15px;
				border-bottom: 1px solid #ccc;
			}
			
			.text{
				z-index: -1;
				position: fixed;
				top:50%;
				transform: translateY(-50%);
				width: 100%;
			}
			.back, .next{
				text-align: center;
				width: 100px;
				position: absolute;
				color: #46b1de;
			}
			.back{
				left: 0;
			}
			.next{
				right: 0;
			}
			
			.next .icon{
				transform: rotate(180deg);
			}
			.back .icon{
				transform: rotate(0deg);
			}
		</style>
	</head>
	<body>
		<div class="text">
			<div class="back">
				<div class="icon">
					<p class="iconfont icon-xiangyou"></p>
				</div>
				<span>上一页</span>
			</div>
			<div class="next" >
				<div class="icon">
					<p class="iconfont icon-xiangyou"></p>
				</div>
				<span>下一页</span>
			</div>
		</div>
		<ul class="goods-list" id="list">
			<li>商品列表1</li>
			<li>商品列表2</li>
			<li>商品列表3</li>
			<li>商品列表4</li>
			<li>商品列表5</li>
			<li>商品列表6</li>
			<li>商品列表7</li>
			<li>商品列表8</li>
			<li>商品列表9</li>
			<li>商品列表10</li>
			<li>商品列表11</li>
			<li>商品列表12</li>
			<li>商品列表13</li>
			<li>商品列表14</li>
			<li>商品列表15</li>
			<li>商品列表16</li>
			<li>商品列表17</li>
			<li>商品列表18</li>
			<li>商品列表19</li>
			<li>商品列表20</li>
		</ul>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			let list = document.getElementById("list")
			let nextDom = $(".next").find(".iconfont")
			let backDom = $(".back").find(".iconfont")
			let sx , sy
			
			let isRequire = {
				aut : false, //是否应该请求数据
				dir : 1 //请求的是上一页的数据还是下一页的数据
			};
			
			list.addEventListener("touchstart",function(event){
				this.className = "goods-list"
				
				let {clientX:x,clientY:y} = event.touches[0]
				sx = x
				sy = y
			})
			
			list.addEventListener("touchmove",function(event){
				let {clientX:x,clientY:y} = event.touches[0]
				
				let mx = x-sx
				let my = y-sy
				
				let ax = Math.abs(mx)
				let ay = Math.abs(my)
				
				//当前被拖动的值 * 180/100
				
				let deg = ax * 1.8
				let adeg = Math.abs(deg)
				
				if(mx < 0){ //此时应该控制下一页中的箭头
					if(adeg < 180 ){
						nextDom.css("transform",`rotate(${deg}deg)`)
					}else{
						nextDom.css("transform",`rotate(${180}deg)`)
					}
					
				}else{
					if(adeg < 180 ){
						backDom.css("transform",`rotate(${-adeg}deg)`)
					}else{
						backDom.css("transform",`rotate(${180}deg)`)
					}
				}
				
				if(ax/4 > ay){
					if(ax < 100){
						this.style.transform = `translateX(${mx}px)`					
					}else{
						this.style.transform = `translateX(${mx/ax*100}px)`
						//用于记录当用户松开手指时 是否应该发起请求
						isRequire.aut = true
						
						//负值代表请求上一页  正值代表请求下一页
						isRequire.dir = -mx/ax 
					}
				}
				
				
				
				
			})
			
			list.addEventListener("touchend",function(){
				this.className = "goods-list run"
				this.style.transform = "translateX(0px)"
				
				if(isRequire.aut){
					if(isRequire.dir == -1){
						back()
					}else{
						next()
					}
				}
				
				isRequire.aut = false
			})
			
			list.addEventListener("transitionend",function(){
				this.className = "goods-list"
			})
			
			function next(){
				console.log("开始请求下一页的数据")
			}
			
			function back(){
				console.log("开始请求上一页的数据")
			}
			
		</script>
	</body>
</html>
